<template>
  <van-nav-bar
    title="详情"
    left-text="返回"
    left-arrow
    @click-left="onClickLeft"
  />
  <div class="detail-content">
    <img :src="scenic.cover_url" alt="" />
    <div class="detail-header">
      <div class="left">
        <van-icon name="arrow" size="18" color="#1989fa" />
        <div class="text">{{ scenic.scenic_name }}</div>
      </div>
      <div class="right">
        <van-rate
          style="margin-right:5px;"
          color="orange"
          size="15"
          v-model="scenic.comment_score"
          allow-half
          readonly
        />
        <div>
          {{ scenic.comment_score }}
        </div>
      </div>
    </div>
    <div class="detail-address">
      <div class="left">
        <van-icon name="location-o" />
        <div>{{ scenic.address }}</div>
      </div>
    </div>
    <van-divider>介绍</van-divider>
    <div class="scenic-detail">
      {{ scenic.introduce }}
    </div>
  </div>
</template>

<script>
// import { ref } from 'vue'
import request from '@/utils/request'

export default {
  name: 'scenic_detail',
  data () {
    return {
      scenic: {}
    }
  },
  props: {
    scenicId: {
      type: String,
      required: true
    }
  },
  created () {
    this.loadScenic()
  },
  methods: {
    async loadScenic () {
      const res1 = await request.post({
        url: '/CTRSM/Browse.adub',
        data: { flag: 'getScenicById', id: this.scenicId }
      })
      if (res1.status === 200) {
        this.scenic = res1.data.output[0]
      }
    },
    onClickLeft () {
      this.$router.back() // 返回上一层
    }
  }
}
</script>

<style lang="less">
.detail-content {
  img {
    width: 100%;
  }
  .detail-header {
    margin: 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .left {
      display: flex;
      align-items: center;
    }
    .right {
      display: flex;
    }
  }
  .detail-address {
    margin: 10px 5px;
    font-size: smaller;
    color: grey;
    .left {
      display: flex;
      align-items: center;
    }
  }
  .scenic-detail {
    margin: 10px;
  }
}
</style>
